<template>
  <div>
    <Wrapper class="w">
      <div class="fileSercher">
        <el-input v-model="input" placeholder="请输入内容" class="inputFn" size="medium" />
        <el-select v-model="value" placeholder="请选择" class="select" size="medium">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button
          icon="el-icon-search"
          type="primary"
          class="checkButt"
          size="mini"
        >查询</el-button>
      </div>
      <div class="newFile">
        <el-button type="primary" size="mini" @click="dialogFormVisible = true">+新建文件收发</el-button>
      </div>
      <div class="fileTable">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          size="mini"
          stripe="true"
        >
          <el-table-column
            type="selection"
            width="36"
          />
          <el-table-column
            prop="date"
            label="培训项目"
            width="286"
          />
          <el-table-column
            prop="name"
            label="学段"
            width="100"
          />
          <el-table-column
            prop="address"
            label="学科"
            width="100"
          />
          <el-table-column
            prop="name"
            label="培训开始时间"
            width="100"
          />
          <el-table-column
            prop="address"
            label="培训结束时间"
            width="100"
          />
          <el-table-column
            prop="name"
            label="学校提交情况"
            width="100"
          />
          <el-table-column
            prop="address"
            label="完成状态"
            width="150"
          />
          <el-table-column
            prop="address"
            label="操作"
            width="205"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-edit"
                plain
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
              >下载</el-button>
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                plain
                @click="dialogTableVisible = true"
              >提交详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="fileTableBottom">
        <el-button size="mini">选择全部</el-button>
        <el-dropdown>
          <el-button size="mini">
            更多操作<i class="el-icon-arrow-down el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="pagination">
          <el-pagination
            background
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="prev, pager, next,sizes"
            :total="1000"
          />
        </div>
      </div>
      <el-dialog title="新增文件收发" width="30%" :visible.sync="dialogFormVisible">
        <el-form ref="form" :model="form" label-width="110px">
          <el-form-item label="*标题">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="*选择培训项目">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="*说明">
            <el-input v-model="form.desc" type="textarea" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
        <div class="fileSercher">
          <el-input v-model="input" placeholder="请输入内容" class="inputFn" size="mini" style="margin-right:10px" />
          <el-button
            icon="el-icon-search"
            type="primary"
            size="mini"
          >查询</el-button>
          <el-button
            icon="el-icon-search"
            type="primary"
            size="mini"
          >查询</el-button>
        </div>
        <el-radio-group v-model="radio1" class="checkButt1" size="mini">
          <el-radio-button label="未提交" />
          <el-radio-button label="提交" />
        </el-radio-group>
        <div class="fileTable">
          <el-table
            :data="gridData"
            border
            style="width: 100%"
            size="mini"
            stripe="true"
          >
            <el-table-column
              type="selection"
              width="36"
            />
            <el-table-column
              prop="date"
              label="学校"
              width="200"
            />
            <el-table-column
              prop="name"
              label="提交时间"
              width="150"
            />
            <el-table-column
              prop="address"
              label="提交文件"
              width="150"
            />
            <el-table-column
              prop="name"
              label="学分管理员"
              width="100"
            />
            <el-table-column
              prop="address"
              label="联系方式"
              width="200"
            />
          </el-table>
        </div>
        <div class="fileTableBottom">
          <el-button size="mini">选择全部</el-button>
          <el-dropdown>
            <el-button size="mini">
              更多操作<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="pagination">
            <el-pagination
              background
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              layout="prev, pager, next,sizes"
              :total="1000"
            />
          </div>
        </div>
      </el-dialog>
    </Wrapper>
  </div>
</template>

<script>
import Wrapper from '@/components/Wrapper'
export default {
  components: { Wrapper },
  data() {
    return {
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      radio1: '未提交',
      dialogTableVisible: false,
      formLabelWidth: '120px',
      dialogFormVisible: false,
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市 1518 '
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市 1518 '
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市 1518 '
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市 1518 '
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市 1518'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市 1518 '
      },
      {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市 1518 '
      }]
    }
  }
}
</script>
<style lang="scss" scoped >
.inputFn{
  width: 200px;
}
.select{
  margin-left: 15px;
  width: 150px;
}
.checkButt{
  position: absolute;
  right: 30px;
}
.checkButt1{
  position: absolute;
  right: 30px;
  top: 81px;
}

.fileTableBottom{
  margin-top: 15px;
  display: flex;
}
.pagination{
  position: absolute;
  right: 20px;
}
.w{
  width: 1190px;
  height: 580px;
  margin: auto;
  .fileSercher{
   display: flex;
  }
  .newFile{
    margin-top: 20px;
  }
  .fileTable{
    margin-top: 20px;
  }
  }
 </style>
